<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="header-title">反馈建议</text>
    </view>

    <!-- 文本输入区域 -->
    <view class="feedback-section">
      <text class="label">您的建议：</text>
      <textarea
        class="feedback-input"
        v-model="feedbackContent"
        maxlength="500"
        placeholder="请输入您的反馈建议，不超过500字"
        auto-height
      ></textarea>
      <!-- 字数统计 -->
      <text class="char-count">{{ feedbackContent.length }} / 500</text>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submitFeedback">提交建议</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackContent: '', // 用于存储用户输入的反馈建议
    };
  },
  methods: {
    // 提交反馈建议
    submitFeedback() {
      if (!this.feedbackContent.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none',
        });
        return;
      }

      // 显示弹窗提示提交成功
      uni.showModal({
        title: '提交成功',
        content: '感谢您的反馈！',
        showCancel: false,
        confirmText: '知道了',
        success: () => {
          // 清空当前输入框内容
          this.feedbackContent = '';
        },
      });
    },
  },
};
</script>

<style scoped>
/* 页面容器样式 */
.container {
  padding: 20px;
  background: linear-gradient(135deg, #e6f7ff, #f4f4f4);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 页面标题样式 */
.header {
  text-align: center;
  margin-bottom: 15px;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  color: #007aff;
}

/* 反馈输入区域样式 */
.feedback-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #555;
}

.feedback-input {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  color: #333;
  background-color: #fafafa;
  resize: none;
}

.feedback-input::placeholder {
  color: #bbb;
}

.char-count {
  font-size: 12px;
  color: #999;
  text-align: right;
  display: block;
  margin-top: 5px;
}

/* 提交按钮样式 */
.submit-section {
  margin-top: 10px;
}

.submit-btn {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007aff;
  border-radius: 8px;
  text-align: center;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2);
}

.submit-btn:active {
  background-color: #005ecb;
  box-shadow: none;
}
</style>
